<template>
  <div class="wrap">
    <div class="search_input">
      <u-search v-model="searchVal" :input-style="{height: '72rpx'}" :show-action="false" placeholder="请输入智客名称进行搜索" />
    </div>
    <div class="list">
      <AutoList :params="{Name: searchVal}" :request="getMyTeamList" :show-on-get-data="false" @list="teamData = $event">
        <div v-for="(item, index) in teamData" :key="index" class="list_item flex_start_cen">
          <Image :name="avatarName(item.sex)" oss size="80" type="png" />
          <div class="content">
            <div class="flex_sb_cen">
              <div class="name">{{ item.name }}{{ item.mobile?.slice(-4) }}</div>
              <div v-if="item.profileStatus === 0" class="team_status">{{ item.profileStatus === 0 ? '未完善资料': '' }}</div>
            </div>
          </div>
        </div>
      </AutoList>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed, ref } from 'vue'
import Image from '@C/Image.vue'
import { getMyTeamList } from '@P_GL/ZhiKe/request'
import AutoList from '@C/AutoList.vue'

const searchVal = ref('')
const teamData = ref([])
const avatarName = computed(() => (sex: any) => {
  if (sex === 0) return 'male_avatar'
  return 'female_avatar'
})
</script>
<style lang="less" scoped>
.search {
  padding: 32rpx 24rpx;
  background-color: #fff;
}
.list {
  height: calc(100vh - 200rpx);
  padding: 0 24rpx;
  .list_item {
    background: #FFFFFF;
    border-radius: 20rpx;
    padding: 28rpx 40rpx 28rpx 28rpx;
    margin-top: 16rpx;
    .content {
      margin-left: 16rpx;
      flex: 1; // 填满剩余的容器空间
      font-size: 32rpx;
      .name {
        font-weight: 500;
        color: rgba(0,0,0,0.85);
        line-height: 44rpx;
      }
      .team_status {
        color: #FFFFFF;
        padding: 6rpx 14rpx;
        background: #FF8002;
        border-radius: 4rpx;
        font-weight: 400;
        font-size: 28rpx;
        line-height: 40rpx;
      }
    }
  }
  .load_tips {
    font-size: 24rpx;
    color: rgba(0, 0, 0, 0.45);
    line-height: 36rpx;
    text-align: center;
    margin: 30rpx 0;
  }
}
</style>
